<template>
	<view class="main animated fadeIn faster">
		<view class="content position-fixed z-index-99 bg-fff" :style="{'paddingTop':$store.state.statusBarHeight+'px','top':'0'}">
			<view class="title">
				<view class="ml-2 rounded d-flex-btn" style="background: #c1c1c1; width: 50rpx; height: 50rpx;" @click="goBack"><text class="iconfont icon-31fanhui1 font30 colorfff"></text></view>
			</view>
		</view>
		<view class="pt-230 pb-5 bg-fff">
			<view class="ml-4 d-flex d-flex-middle">
				<view class="position-relative">
					<image class="rounded" :src="$store.state.user.avatar" style="width: 135rpx;height: 135rpx;"></image>
					<view v-show="hasAvatarFrams && device" class="position-absolute" style="width: 185rpx; height: 185rpx; top: -30rpx; left: -22rpx;">
						<l-svga ref="svga"></l-svga>
					</view>
					<view v-show="hasAvatarFrams && !device" class="position-absolute" style="width: 185rpx; height: 185rpx; top: -30rpx; left: -22rpx;">
						<img :src="iconFile" class="position-absolute" style="width: 185rpx; height: 185rpx;"/>
					</view>
				</view>
				<view :class="['font32',hasAvatarFrams? 'ml-4' : 'ml-1']">{{$store.state.user.nickname}}</view>
			</view>
			<view class="ml-4 mt-5 mb-2 font32">提现方式</view>
			<view class="d-flex d-flex-between" style="width: 350px; margin: 0 auto;">
				<view @click="ChangeCurrent(0)" :class="['d-flex-btn','rounded10',' py-2','bgfff',current === 0? 'current' : '']" style="border: 1px solid #eee; width: 310rpx;">
					<image src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/%E6%94%AF%E4%BB%98%E5%AE%9D%E6%94%AF%E4%BB%98.png" style="width: 40rpx; height: 40rpx;"></image>
					<view class="font32 ml-1" style="display: inline-block;">支付宝</view>
				</view>
				<!-- <view @click="ChangeCurrent(1)" :class="['d-flex-btn','rounded10',' py-2','bgfff',current === 1? 'current' : '']" style="border: 1px solid #eee; width: 310rpx;">
					<image src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/%E6%94%AF%E4%BB%98-%E5%BE%AE%E4%BF%A1%E6%94%AF%E4%BB%98.png" style="width: 40rpx; height: 40rpx;"></image>
					<view class="font32 ml-1" style="display: inline-block;">微信</view>
				</view> -->
			</view>
		</view>
		<view class="pb-5 d-flex bg-fff" style="width: 1500rpx; margin: 20rpx auto 0; transition: all 0.3s ease;" :style="{transform: 'translateX('+DicX+'rpx)'}">
			<view style="width: 750rpx; margin: 0 auto;">
				<view style="width: 680rpx; margin: 0 auto;">
					<view class="d-flex d-flex-middle py-3" style="background: #f0f5fd;">
						<view class="font32 ml-4" style="width: 150rpx;">到账账号</view>
						<view v-if="this.$store.state.AlipayAccount" class="font32 d-flex" style="flex: 1;">
							<view>{{hidePhone}}</view>
							<view @click="BindApplyAccount" class="font30 ml-4" style="color: #1a8cff;">更换</view>
						</view>
						<view @click="BindApplyAccount" v-else style="color: #1a8cff;">绑定账号</view>
					</view>
					<view class="d-flex d-flex-middle mt-4">
						<view class="ml-4 font32">提现金额</view>
						<view class="" style="color: #727272;">（提现金额需满0.1元）</view>
					</view>
					<view class="d-flex d-flex-middle" style="width: 95%; margin: 0 auto; border-bottom: 1px solid #9B9B9B; height: 100rpx;">
						<view class="ml-2" style="font-size: 60rpx;">￥</view>
						<input type="digit" @keyboardheightchange="keyboardheightchange" v-model="Amount" :placeholder="placeholder"/>
					</view>
					<view class="d-flex ml-4 mt-2">
						<view style="color: #47bffa; margin-right: 2px;">立即兑换</view>
						<view>嗒币可得2.25币</view>
					</view>
					<view @click="CreateWithdrawal" class="colorfff rounded40 d-flex-btn py-2 font32" style="background: #56a2ff; width: 86%; margin: 150rpx auto 0;">提现</view>
					<view class="d-flex d-flex-middle d-flex-center mt-3">
						<checkbox  @click="Agree = !Agree" :checked="Agree" style="transform:scale(0.7);"></checkbox>
						<view class="d-flex mr-2">
							<view class="" style="color: #aaa;">我已阅读并同意</view>
							<view style="color: #47bffa;">服务协议</view>
							<view class="" style="color: #aaa;">和</view>
							<view style="color: #47bffa;">提现规范</view>
						</view>
					</view>
				</view>
			</view>
			<view style="width: 750rpx; margin: 0 auto;">
				<!-- <view style="width: 680rpx; margin: 0 auto;">
					<view class="d-flex py-3" style="background: #f0f5fd;">
						<view class="font32 ml-4" style="width: 150rpx;">到账账号</view>
						<view class="font32">（Pansers）</view>
					</view>
					<view class="d-flex d-flex-middle mt-4">
						<view class="ml-4 font32">提现金额</view>
						<view class="" style="color: #727272;">（提现金额需满0.1元）</view>
					</view>
					<view class="d-flex d-flex-middle" style="width: 95%; margin: 0 auto; border-bottom: 1px solid #9B9B9B; height: 100rpx;">
						<view class="ml-2" style="font-size: 60rpx;">￥</view>
						<input type="digit" @keyboardheightchange="keyboardheightchange" v-model="Amount" placeholder="可提现2元"/>
					</view>
					<view class="d-flex ml-4 mt-2">
						<view style="color: #47bffa; margin-right: 2px;">立即兑换</view>
						<view>嗒币可得2.25币</view>
					</view>
					<view @click="Withdrawal" class="colorfff rounded40 d-flex-btn py-2 font32" style="background: #56a2ff; width: 86%; margin: 150rpx auto 0;">提现</view>
					<view class="d-flex d-flex-middle d-flex-center mt-3">
						<checkbox  @click="Agree = !Agree" :checked="Agree" style="transform:scale(0.7);"></checkbox>
						<view class="d-flex mr-2">
							<view class="" style="color: #aaa;">我已阅读并同意</view>
							<view style="color: #47bffa;">服务协议</view>
							<view class="" style="color: #aaa;">和</view>
							<view style="color: #47bffa;">提现规范</view>
						</view>
					</view>
				</view> -->
			</view>
		</view>
		<uni-popup ref="BindApplyAccountPopup" background-color="#fff" border-radius="8px 8px 8px 8px">
			<view class="popup-content BindApplyAccount" style="height: 320rpx; width: 450rpx;">
				<view class="text-center font32">绑定支付宝账号</view>
				<input class="uni-input" maxlength="25" v-model="AlipayAccount" placeholder="请输入支付宝账号" focus/>
				<view v-if="PhoneError" class="font28 mt" style="color: #f76275;">请输入正确的支付宝账号!</view>
				<view class="btn d-flex position-absolute">
					<view class="cancle text-center font28" style="width: 50%; line-height: 90rpx; border-right: 1px solid #ededed;" @click="ColseBindApplyAccountPopup">取消</view>
					<view class="confirm text-center font28" style="width: 50%; line-height: 90rpx;" @click="confirmApplyAccount">确认</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import store from '@/store/index.js';
	import { PayApi } from '../../http/PayApi';
	import { userApi } from '../../http/userApi';
	import { toValue } from 'vue';
	export default {
		data() {
			return {
				Agree: false,
				current: 0,
				DicX: 0,
				Amount: null, // 提现金额
				placeholder: null,
				AlipayAccount: null,
				PhoneError: false,
				hasAvatarFrams: null, // 是否拥有头像框
				device: null ,// 设备类型
				iconFile: null, // 静态头像框地址
				svgaFile: null, // 动态头像框地址
			}
		},
		onLoad() {
			this.placeholder = '可提现'+store.state.user.giftAvailableAmount+'元'
			if(this.$store.state.user.dressedVoMap['1']){
				console.log('有头像框');
				setTimeout(() => {
					// 判断是否设置了头像框
					this.JudgeHasAvatarFrams()
				},500)
			} else {
				console.log('没有头像框');
			}
		},
		methods: {
			goBack() {
				uni.navigateBack({
					delta: 1
				});
			},
			ChangeCurrent(dex) {
				this.current = dex
				this.DicX = this.current * -750
			},
			Withdrawal() {
				// 微信授权
				uni.login({
					provider: 'weixin',
					success: loginRes => {
						// authResul下包含 用户的openid,把openid保存下来发给后端
						console.log(loginRes.authResult.openid);
					},
					fail:function(loginRes){
						console.log(loginRes)
						uni.showToast({
							title: "微信调用失败,无法完成提现!",
							icon: "none"
						})
					}
				})
			},
			BindApplyAccount() {
				this.$refs.BindApplyAccountPopup.open('center')
			},
			ColseBindApplyAccountPopup() {
				this.AlipayAccount = null
				this.PhoneError = false
				this.$refs.BindApplyAccountPopup.close()
			},
			// 确认绑定支付宝账户
			confirmApplyAccount() {
				this.PhoneError = !this.IsValidPhoneNumber(this.AlipayAccount)
				if(!this.PhoneError) {
					store.commit('setAlipayAccount', this.AlipayAccount)
					console.log(this.$store.state.AlipayAccount);
					this.$refs.BindApplyAccountPopup.close()
					uni.showToast({
						title: '绑定成功!',
						icon: 'none',
						duration: 1500
					})
				}
			},
			// 验证是否是手机号或者邮箱账号
			IsValidPhoneNumber(phone) {
				const regex = /^1[3-9]\d{9}$/;
				const emailRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
				return regex.test(phone) || emailRegex.test(phone)
			},
			// 检查提现金额是否合法
			keyboardheightchange(event) {
				if(event.detail.height <= 0 && this.Amount) {
					this.Amount = Number(this.Amount).toFixed(2)
					if(this.Amount>200 || this.Amount>store.state.user.giftAvailableAmount) {
						this.Amount = 200
						this.Amount = this.Amount.toFixed(2)
						uni.showToast({
							title: '超过可提现金额!',
							icon: 'none',
							duration: 1500
						})
					}
					if(this.Amount < 0.1) {
						this.Amount = 0.1
						this.Amount = this.Amount.toFixed(2)
						uni.showToast({
							title: '低于最小提现金额!',
							icon: 'none',
							duration: 1500
						})
					}
				}
			},
			async CreateWithdrawal() {
				if(this.$store.state.user.realName==''||this.$store.state.user.realName==null){
					uni.showToast({
						title: '请先实名认证！',
						icon: 'none',
						duration: 1500
					})
					return
				}
				if(!store.state.AlipayAccount) {
					uni.showToast({
						title: '请先绑定支付宝账号!',
						icon: 'none',
						duration: 1500
					})
					return
				}
				if(!store.state.AlipayAccount) {
					uni.showToast({
						title: '请先绑定支付宝账号!',
						icon: 'none',
						duration: 1500
					})
					return
				}
				if(!this.Amount) {
					uni.showToast({
						title: '请输入提现金额!',
						icon: 'none',
						duration: 1500
					})
					return
				}
				if(!this.Agree) {
					uni.showToast({
						title: '请勾选服务协议!',
						icon: 'none',
						duration: 1500
					})
					return
				}
				let params = {
					amount: this.Amount,
					channel: 3,
					thirdAccount: store.state.AlipayAccount,
					type: 1
				}
				console.log(params);
				
				uni.showLoading({
					title: '提现中...'
				});
				
				let res = await PayApi.CreateWithdrawal(params)
				this.Amount = null
				uni.hideLoading();
				if(res.transferSuccess) {
					uni.showToast({
						title: '提现成功，请注意查收!',
						icon: 'none',
						duration: 1500
					})
				} else {
					uni.showToast({
						title: '提现人数过多，请稍候再试!',
						icon: 'none',
						duration: 1500
					})
				}
			},
			// 判断是否设置了头像框
			JudgeHasAvatarFrams() {
				if(this.$store.state.user.dressedVoMap && this.$store.state.user.dressedVoMap[1].svga) {
					this.svgaFile = this.$store.state.user.dressedVoMap[1].svga
					this.hasAvatarFrams = true
				}
				if(this.$store.state.user.dressedVoMap && this.$store.state.user.dressedVoMap[1].icon) {
					this.iconFile = this.$store.state.user.dressedVoMap[1].icon
					this.hasAvatarFrams = true
				}
				
				// 判断设备，APP设置动态头像框，小程序设置静态头像框
				// #ifdef APP
					this.device = true
				// #endif
				//#ifdef MP-WEIXIN
					this.device = false
				// #endif
				
				console.log(this.device);
				
				// 如果有头像框就设置头像框
				if(this.hasAvatarFrams) {
					this.setAvatarFrams()
				}
			},
			// 设置动态头像框
			setAvatarFrams() {
				// 只有App才设置动态头像框
				if(this.device) {
					this.$refs.svga.render(async (parser, player) => {
						const videoItem = await parser.load(this.svgaFile);
						await player.setVideoItem(videoItem);
						player.setContentMode(() => {
							contentMode: 'AspectFill' 
						})
						player.startAnimation()
					})
				}
			}
		},
		computed: {
			hideName() {
				let name = store.state.user.realName
				return '*'.repeat(name.length - 1) + name.charAt(name.length - 1);
			},
			hidePhone() {
				let phone = store.state.AlipayAccount
				const regex = /^1[3-9]\d{9}$/;
				if(regex.test(phone)) {
					return phone.substr(0,3) + "****" +phone.substr(7)
				} else {
					return phone.substr(0,2) + "*****" +phone.substr(7)
				}
			}
		}
	}
</script>

<style scoped lang="scss">
.main {
	background: #f8f8f8;
	overflow: hidden;
	.content .title {
		width: 750rpx;
		display: flex;
		align-items: center;
		height: 80rpx;
	}
	.pt-230 {
		padding-top: 230rpx;
	}
	.current {
		background: #f4f9ff !important;
		border-color: #1a8cff !important;
		color: #1a8cff !important;
	}
	.BindApplyAccount {
		padding: 40rpx 60rpx 0;
		color: #1f1f1f;
		input {
			box-sizing: border-box;
			border-radius: 10rpx;
			color: #333333;
			font-size: 26rpx;
			width: 100%;
			margin-top: 40rpx;
			height: 70rpx;
			padding-left: 20rpx;
			background-color: #efefef;
		}
		.desc {
			margin-top: 25rpx;
			font-size: 22rpx;
			color: #888888;
		}
		.btn {
			bottom: 0;
			left: 0;
			width: 100%;
			height: 90rpx;
			border-top: 1px solid #ededed;
		}
		.cancle {
			color: #9E9D9D;
		}
		.confirm {
			color: #66CCCC;
		}
	}
}
</style>
